<template>
  <div class="signalr-test">
    <h2>SignalR连接测试</h2>
    
    <div class="controls">
      <el-button @click="connect" :disabled="isConnected" type="primary">
        连接
      </el-button>
      <el-button @click="disconnect" :disabled="!isConnected" type="danger">
        断开
      </el-button>
      <el-button @click="sendTestPaint" :disabled="!isConnected" type="warning">
        发送测试涂色
      </el-button>
      <el-button @click="clearLogs" type="info">
        清空日志
      </el-button>
    </div>

    <div class="status">
      <p>连接状态: <span :class="{ connected: isConnected }">{{ isConnected ? '已连接' : '未连接' }}</span></p>
      <p>连接ID: {{ connectionId }}</p>
      <p>房间: {{ roomId }}</p>
      <p>玩家ID: {{ playerId }}</p>
    </div>

    <div class="log-panel">
      <h3>事件日志</h3>
      <div class="log-content">
        <div v-for="log in logs" :key="log.id" class="log-item" :class="log.type">
          <span class="log-time">{{ log.time }}</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { createSignalRService } from '@/services/socketService'
import { ElMessage } from 'element-plus'

const isConnected = ref(false)
const connectionId = ref('')
const roomId = ref('test-room-001')
const playerId = ref('player-' + Math.random().toString(36).substr(2, 9))
const logs = ref([])

const signalRService = createSignalRService({})

function addLog(type, message) {
  logs.value.push({
    id: Date.now() + Math.random(),
    type,
    message,
    time: new Date().toLocaleTimeString()
  })
}

async function connect() {
  try {
    addLog('info', '正在连接...')
    await signalRService.connect()
    isConnected.value = true
    connectionId.value = signalRService.getConnectionId() || '未知'
    addLog('success', '连接成功')
    ElMessage.success('连接成功')
  } catch (error) {
    addLog('error', '连接失败: ' + error.message)
    ElMessage.error('连接失败: ' + error.message)
  }
}

async function disconnect() {
  try {
    await signalRService.disconnect()
    isConnected.value = false
    connectionId.value = ''
    addLog('info', '已断开连接')
    ElMessage.info('已断开连接')
  } catch (error) {
    addLog('error', '断开连接失败: ' + error.message)
  }
}

function sendTestPaint() {
  const testData = {
    x: 100,
    y: 100,
    color: '#ff0000',
    brushSize: 10,
    tool: 'brush'
  }
  
  addLog('info', `发送测试涂色: ${JSON.stringify(testData)}`)
  
  try {
    signalRService.sendPaintAction(
      roomId.value,
      playerId.value,
      testData.x,
      testData.y,
      testData.color,
      testData.brushSize,
      testData.tool
    )
    addLog('success', '测试涂色已发送')
    ElMessage.success('测试涂色已发送')
  } catch (error) {
    addLog('error', '发送失败: ' + error.message)
    ElMessage.error('发送失败: ' + error.message)
  }
}

function clearLogs() {
  logs.value = []
  addLog('info', '日志已清空')
}

onMounted(() => {
  // 设置事件监听
  signalRService.on('Connected', (data) => {
    addLog('success', 'SignalR连接成功')
  })
  
  signalRService.on('PaintActionReceived', (data) => {
    addLog('info', `收到涂色动作: ${JSON.stringify(data)}`)
  })
  
  signalRService.on('PlayerJoined', (data) => {
    addLog('info', `玩家加入: ${data.Nickname}`)
  })
  
  signalRService.on('PlayerLeft', (data) => {
    addLog('info', `玩家离开: ${data.PlayerId}`)
  })
  
  addLog('info', '页面已加载')
})

onUnmounted(() => {
  // 清理事件监听
  signalRService.off('Connected')
  signalRService.off('PaintActionReceived')
  signalRService.off('PlayerJoined')
  signalRService.off('PlayerLeft')
})
</script>

<style scoped>
.signalr-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.status {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.status p {
  margin: 5px 0;
}

.status .connected {
  color: #52c41a;
  font-weight: bold;
}

.log-panel {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.log-panel h3 {
  margin: 0;
  padding: 15px;
  background: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.log-content {
  height: 400px;
  overflow-y: auto;
  padding: 10px;
}

.log-item {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
  padding: 5px;
  border-radius: 4px;
  font-size: 12px;
}

.log-item.info {
  background: #e6f7ff;
  color: #1890ff;
}

.log-item.success {
  background: #f6ffed;
  color: #52c41a;
}

.log-item.error {
  background: #fff2f0;
  color: #ff4d4f;
}

.log-time {
  color: #999;
  min-width: 80px;
}

.log-message {
  flex: 1;
  word-break: break-all;
}
</style>
